// 物料组分析
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import { Button, Form, Input, Table, DatePicker } from 'antd';
import type { ColumnsType } from 'antd/lib/table';
import { FC, useState } from 'react';
import './index.css'
import axios from '../../../../utils/axios'
interface DataType {
  key: string;  //序号
  material: string;  //物料组
  qualified: string;//合格
  Concessions: string;//让步接受
  Return: string;//退货
  review: string;//评审
  totalNumber: string;//总批数
  Percent: string;//合格率
  ReturnRate: string//退货率
}
const { RangePicker } = DatePicker;
const YieldAnalysis: FC = () => {
  const [dataList, setDataList] = useState([])
  // 查询和重置按钮
  const TheQuery = () => {
    console.log(123);
  }
  const reset = () => {
    console.log(333);

  }
  // 导出
  const showModal = () => { };
  // --------------------
  const [form] = Form.useForm();
  //table表格数据
  axios({
    url: "/api3material/materialAnalysis/selectQualified",
  })
    .then((data) => setDataList(data.data.data.ListQualifieds))
    .catch((error) => console.log(error));
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'key',

    },
    {
      title: '物料组',
      // className: 'column-money',
      dataIndex: 'material',
      align: 'center',
    },
    {
      title: '合格',
      dataIndex: 'qualified',

    },
    {
      title: '让步接受',
      dataIndex: 'Concessions',
    },
    {
      title: '退货',
      dataIndex: 'Return',

    },
    {
      title: '评审',
      dataIndex: 'review',
    },
    {
      title: '总批数',
      dataIndex: 'totalNumber',
    },
    {
      title: '合格率',
      dataIndex: 'Percent',
    },
    {
      title: '退货率',
      dataIndex: 'ReturnRate',
    }
  ];

  const data: DataType[] = [
    {
      key: '1',
      material: '物料组11',
      qualified: "111",
      Concessions: '2',
      Return: '1',
      review: '1',
      totalNumber: '1',
      Percent: '97.2%',
      ReturnRate: '0.52%'
    },
    {
      key: '2',
      material: '物料组12',
      qualified: '222',
      Concessions: '2',
      Return: '2',
      review: '1',
      totalNumber: '3',
      Percent: '98%',
      ReturnRate: '0.22%'
    },
    {
      key: '3',
      material: '物料组13',
      qualified: '345',
      Concessions: '4',
      Return: '4',
      review: '1',
      totalNumber: '1',
      Percent: '99%',
      ReturnRate: '0.00%'
    },
  ];


  const { TextArea } = Input
  return (<div>
    <Form form={form} layout="inline" className='btnStyel'>
      <Form.Item >时间：<RangePicker /></Form.Item>
      <Form.Item >物料组:<Input className='inp' /></Form.Item>
      <Form.Item><Button icon={<SearchOutlined />} style={{ borderColor: 'rgb(2,167,240)', color: 'rgb(2,167,240)' }} onClick={TheQuery}>查询</Button></Form.Item>
      <Form.Item><Button icon={<RedoOutlined />} style={{ borderColor: 'rgb(245,154,35)', color: 'rgb(245,154,35)' }} onClick={reset}>重置</Button></Form.Item>
    </Form>
    <div><Button style={{ margin: '0.3rem' }} type="primary" onClick={showModal}>+导出</Button></div>
    <Table
      columns={columns}
      bordered
      dataSource={dataList}
      rowKey={(record) => record.material}
    // rowKey="key"
    />
  </div>

  );
};
export default YieldAnalysis